<template>
	<view class="show-goods-wrap" @click="onClick">
		<view class="show-goods-main">
			<image :src="pictureUrl[0]" class="show-goods-img" mode="aspectFill"></image>
			<view class="show-goods-left">
				<view class="layer5">
					<view class="bd5" v-if="data.codCategory == 5">中药</view>
					<view class="bd4" v-if="data.codCategory == 4">西药</view>
					<view class="word6">{{ data.name }}</view>
				</view>
				<view class="txt2 nowrap">{{ data.specification }}</view>
				<view class="layer6">
					<view class="txt3">{{ data.price }}</view>
					<view class="word7">元</view>
				</view>
			</view>
			<view class="show-goods-right" v-if="type != 1">X{{ data.totalNum || data.commodityNum }}</view>

			<view class="select-goods-btn2" v-if="type == 1" @click.stop="onClickBtn">{{ btnText }}</view>
		</view>
		<view v-if="showRecipe && data.frequency" class="show-goods-remark">用药频率：{{ data.frequency }}</view>
		<view v-if="showRecipe && data.onceDosage" class="show-goods-remark">单次用量：{{ data.onceDosage }}</view>
		<view v-if="showRecipe && data.useMethod" class="show-goods-remark">用药方法：{{ data.useMethod }}</view>
		<view v-if="showRecipe && data.remark" class="show-goods-remark">备注：{{ data.remark }}</view>
		<view class="main5" v-if="type == 2">
			<view class="bd4" @click.stop="onClickOne">删除</view>
			<view class="bd5" @click.stop="onClickTwo">编辑用量</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		type: {
			type: Number | String,
			default: 0
		},
		data: {
			type: Object,
			default() {
				return {};
			}
		},
		showRecipe: {
			type: Boolean,
			default: false
		},

		btnText: {
			type: String,
			default: '删除'
		}
	},
	computed: {
		pictureUrl() {
			return this.data.pictureUrl.split(',');
		}
	},
	data() {
		return {};
	},
	onLoad(option) {},
	onShow() {},
	methods: {
		onClick() {
			this.$emit('onClick');
		},

		onClickBtn() {
			this.$emit('onClickBtn');
		},

		onClickOne() {
			this.$emit('onClickOne');
		},

		onClickTwo() {
			this.$emit('onClickTwo');
		}
	}
};
</script>

<style lang="less">
.show-goods-wrap {
	border-radius: 8rpx;
	background-color: rgba(248, 248, 248, 1);
	margin-bottom: 10rpx;
	width: 626rpx;
	padding: 30rpx 20rpx;
	box-sizing: border-box;
	.show-goods-main {
		display: flex;
		align-items: center;
		.show-goods-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
		}
		.show-goods-left {
			width: 300rpx;
			// height: 120rpx;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;

			.layer5 {
				// width: 250rpx;
				display: flex;
				align-items: center;
				.bd4 {
					width: 68rpx;
					height: 31rpx;
					border-radius: 4rpx;
					border: 1rpx solid rgba(35, 199, 156, 1);
					background-color: rgba(247, 255, 253, 1);
					justify-content: center;
					align-items: center;
					display: flex;
					flex-direction: column;
					color: rgba(35, 199, 156, 1);
					font-size: 20rpx;
					font-family: PingFangSC-Regular;
					margin-right: 10rpx;
				}

				.bd5 {
					width: 68rpx;
					height: 31rpx;
					border-radius: 4rpx;
					border: 1rpx solid #806cff;
					background-color: #f9f7ff;
					justify-content: center;
					align-items: center;
					display: flex;
					flex-direction: column;
					color: #806cff;
					font-size: 20rpx;
					font-family: PingFangSC-Regular;
					margin-right: 10rpx;
				}

				.word6 {
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 28rpx;
				}
			}

			.txt2 {
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
				margin-top: 10rpx;
			}
			.layer6 {
				margin-top: 9rpx;
				display: flex;
				align-items: center;
				.txt3 {
					color: rgba(255, 65, 65, 1);
					font-size: 30rpx;
					font-family: PingFangSC-Medium;
				}
				.word7 {
					color: rgba(255, 65, 65, 1);
					font-size: 24rpx;
					font-family: PingFangSC-Regular;
					margin-top: 3rpx;
				}
			}
		}

		.show-goods-right {
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFangSC-Regular;
			margin-left: auto;
		}

		.select-goods-btn2 {
			height: 40rpx;
			border-radius: 20rpx;
			width: 120rpx;
			border: 1rpx solid #999999;
			// background-color: rgba(249, 247, 255, 1);
			justify-content: center;
			align-items: center;
			display: flex;
			margin-left: auto;
			color: #999999;
			font-size: 24rpx;
			font-family: PingFangSC-Medium;
		}
	}

	.show-goods-remark {
		margin-top: 17rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
	}
	.main5 {
		flex-direction: row;
		display: flex;
		margin-top: 20rpx;
		.bd4 {
			height: 40rpx;
			border-radius: 20rpx;
			margin-left: auto;
			margin-right: 20rpx;
			border: 1rpx solid rgba(153, 153, 153, 1);
			background-color: rgba(255, 255, 255, 1);
			width: 100rpx;
			justify-content: center;
			align-items: center;
			display: flex;
			flex-direction: column;
			color: rgba(153, 153, 153, 1);
			font-size: 24rpx;
			font-family: PingFangSC-Medium;
		}

		.bd5 {
			height: 40rpx;
			border-radius: 20rpx;
			border: 1rpx solid rgba(128, 108, 255, 1);
			background-color: rgba(249, 247, 255, 1);
			width: 140rpx;
			justify-content: center;
			align-items: center;
			display: flex;
			flex-direction: column;
			color: rgba(128, 108, 255, 1);
			font-size: 24rpx;
			font-family: PingFangSC-Medium;
		}
	}
}
</style>
